<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-12-02 14:38:19
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-12-02 19:00:08
 * @Description: 
 * @FilePath: \charging-mini\充电项目\pages\invoice_list.vue
-->
<template>
    <div class="container">
        <div class="title">可开票订单</div>
        <div class="list">
            <template v-if="list.length">
                <!-- 消费记录 -->
                <div class="invoice-item" v-for="(item, i) in list" :key="i" @click="check(item)">
                    <div class="invoice-item__check" :style="{ backgroundImage: `url(${item.checked ? imgs.checked : imgs.unchecked})` }"></div>
                    <div class="invoice-item__detail">
                        <div class="invoice-item__top">
                            <div class="invoice-item__text">{{ item.orderNo }}</div>
                            <div class="invoice-item__text">{{ item.payTime }}</div>
                        </div>
                        <div class="invoice-item__bottom">
                            <div class="invoice-item__title">充电扣费</div>
                            <div class="invoice-item__price">
                                <span>{{ (item.payAmount / 100).toFixed(2) }}</span
                                >元
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="hasMore" class="load-more" @click="getList">加载更多</div>
                <div v-else class="no-more">已加载全部</div>
            </template>
            <div v-else class="empty">暂无数据</div>
        </div>

        <div class="invoice-footer">
            <div class="check-all" @click="checkAll">
                <img v-if="hasCheckedAll" :src="imgs.checked" alt="" />
                <img v-else :src="imgs.unchecked" alt="" />
                全选
            </div>
            <div class="invoice-footer-detail">
                <div class="invoice-footer-detail__price">
                    <span>{{ (totalPrice / 100).toFixed(2) }}</span> 元
                </div>
                <div class="invoice-footer-detail__num">已选 {{ checkedNum }} 个</div>
            </div>
            <div class="invoice-footer-submit" @click="submit">去开票</div>
        </div>
    </div>
</template>
<script>
import { getNotInvoicedListAPI, getInvoiceAmountAPI } from "../src/api/api";

const app = getApp();
export default {
    components: {},
    data() {
        return {
            isWx: app.globalData.isWx,
            imgs: app.globalData.imgs,
            hasMore: false,
            list: [],
            page: 1,
            totalPrice: 0,
            loading: false,
        };
    },
    onShareAppMessage() {},
    onLoad(options) {},
    onShow() {
        this.getList();
    },
    computed: {
        hasCheckedAll() {
            let flag = true;
            this.list.forEach((item) => {
                if (!item.checked) {
                    flag = false;
                }
            });
            return flag;
        },
        checkedNum() {
            let n = 0;
            this.list.forEach((item) => {
                if (item.checked) {
                    n++;
                }
            });
            return n;
        },
    },
    methods: {
        // 单选
        check(item) {
            if (this.loading) return false;
            item.checked = !item.checked;
            this.getTotalPrice();
            this.$forceUpdate();
        },
        // 全选
        checkAll() {
            if (this.loading) return false;
            if (this.hasCheckedAll) {
                this.list.forEach((item) => {
                    item.checked = false;
                });
            } else {
                this.list.forEach((item) => {
                    item.checked = true;
                });
            }
            this.getTotalPrice();
            this.$forceUpdate();
        },
        // 计算总价
        getTotalPrice() {
            let orderNos = [];
            this.list.forEach((item) => {
                if (item.checked) {
                    orderNos.push(item.orderNo);
                }
            });
            if (orderNos.length) {
                this.loading = true;
                getInvoiceAmountAPI({ orderNos })
                    .then((res) => {
                        this.totalPrice = res;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                    });
            } else {
                this.totalPrice = 0;
            }
        },
        // 去开票
        submit() {
            if (this.checkedNum === 0) {
                uni.showToast({
                    title: "请选择开票订单",
                    icon: "none",
                });
                return false;
            }
            let orderNos = [];
            this.list.forEach((item) => {
                if (item.checked) {
                    orderNos.push(item.orderNo);
                }
            });
            uni.setStorageSync("invoiceOrderNos", orderNos);
            uni.navigateTo({
                url: "/pages/invoice_form",
            });
        },
        getList() {
            getNotInvoicedListAPI({ page: this.page }).then((res) => {
                let list = res.list;
                list.forEach((item) => {
                    item.checked = false;
                });
                this.list = this.list.concat(list);
                this.hasMore = this.list.length === 20;
                this.page++;
            });
        },
    },
};
</script>
<style scoped lang="less">
.container {
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 28rpx;
        color: #666;
        margin-left: 35rpx;
        padding: 20rpx 0;
    }

    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 180rpx;
        overflow: auto;

        .invoice-item {
            width: 694rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            padding: 28rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            display: flex;
            align-items: center;
            .invoice-item__check {
                flex: none;
                width: 32rpx;
                height: 32rpx;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
            .invoice-item__detail {
                flex: auto;
                display: flex;
                flex-direction: column;
                margin-left: 20rpx;
                .invoice-item__top {
                    display: flex;
                    justify-content: space-between;
                    color: #9a9a9a;
                    font-size: 24rpx;
                    line-height: 1;
                    margin-bottom: 20rpx;
                }
                .invoice-item__bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .invoice-item__title {
                        font-size: 32rpx;
                        line-height: 1;
                        color: #333;
                        font-weight: bold;
                    }
                    .invoice-item__price {
                        font-size: 24rpx;
                        line-height: 1;
                        span {
                            font-size: 36rpx;
                            line-height: 1;
                            color: #ff5e5e;
                            font-weight: bold;
                            margin-right: 10rpx;
                        }
                    }
                }
            }
        }

        .empty {
            font-size: 24rpx;
            line-height: 1;
            color: #999;
            margin-top: 100rpx;
        }

        .load-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #08bfa8;
            padding: 20rpx 0;
            text-align: center;
        }

        .no-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #ccc;
            padding: 20rpx 0 40rpx;
            text-align: center;
        }
    }

    .invoice-footer {
        width: 694rpx;
        height: 120rpx;
        position: fixed;
        bottom: 50rpx;
        left: 28rpx;
        background-color: #fff;
        border-radius: 36rpx;
        box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.16);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;
        .check-all {
            flex: auto;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            line-height: 1;
            img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
        }
    }
    .invoice-footer-detail {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-right: 30rpx;
        .invoice-footer-detail__price {
            font-size: 24rpx;
            line-height: 1;
            color: #333;
            margin-bottom: 10rpx;
            span {
                font-size: 36rpx;
                line-height: 1;
                color: #ff5e5e;
                font-weight: bold;
                margin-right: 10rpx;
            }
        }
        .invoice-footer-detail__num {
            font-size: 24rpx;
            line-height: 1;
            color: #9a9a9a;
            text-align: right;
        }
    }
    .invoice-footer-submit {
        width: 140rpx;
        height: 70rpx;
        border-radius: 35rpx;
        background: linear-gradient(90deg, #8bdab0 0%, #08bfa8 100%);
        color: #fff;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
